<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>
<script>
// 英文：
  // 参数 ： parameter
  // 配置项： options


// encodeURI 本质：将 ”复杂“字符 转码成 ASCII 码。
  // 解码：decodeURI


// url「传参」：目的 对 接口的数据 进行 进一步 ”检索/filter/过滤“
  // 参数：params

  // URLSearchParams 其目的：对 url 中的参数 ，进行「增删改查」
  // 知识点1：参数 init?  eg-> '?city=青岛&county=市北区'
// const oParams = new URLSearchParams();
//   oParams.set('province', '山东省');
//   oParams.set('city', 'weihai');


// --------------------------------------------------


function ajax(url, options = {}) {
  // 设置 默认值
  const defaults = {
    method: 'get',
    params: {},
    success(data) {
      console.log('你没加 success 的回调函数', data);
    },
    error(err) {
      console.log('你没加 error 的回调函数', err);
    }
  }
  
  // 「继承」  defaults 的默认属性；
  // 若 options 有对应的属性，即可将 defaults 对应的属性给 覆盖
  options = {
    ...defaults,
    ...options
  }

  // 「解构赋值」
  let {method, params, success, error} = options;

  // 考虑 params 为默认值的情况，即 params = {}
  params = Object.entries(params); // 返回值： [['province', '山东省'], ['city', '青岛市']]
  if (params.length !== 0) {
    // params 有值的时候，执行 这个 代码块
    const oParams = new URLSearchParams();
    params.forEach(([name, value]) => {
      oParams.set(name, value);
    })

    // 要干这个事：  url += '?province=山东省&city=青岛市'
      // 干这个事的目的是 让 后台 能读懂 前端传给后台的 url
    url +=  `?${oParams.toString()}`;
  }


  const xhr = new XMLHttpRequest();


  xhr.open(method, url, true);
  xhr.send();
  xhr.onload = function() {
    const data = JSON.parse(xhr.response);
    success(data);
  }

  xhr.onerror = function(err) {
    error(err);
  }
}


// ajax('http://127.0.0.1:7788/api/address', {
//   success: function(data) { // 必填参
//     // 成功 获得 数据
//   },
//   error: function(err) { // 也可以是选填参；自行设计 若用户不写 error 回调 怎么办
//     // 失败获取 数据
//   },
//   // method: 'get' // 选填参，不填写的话，默认值为 get
//   params: { // 表示 GET 请求，加入的参数
//     province: '山东省',
//     city: '青岛市'
//   },
//   // method: 'post'  可选参，默认值是 'get'
// })



</script>
